<template>
    <div class="main-index main-list">
        <div class="container">
		<table class="m-nav">
                <tr>
                    <th>子栏目：</th>
                    <td>
                        <a
                        v-for="(child,index) in childCateList"
                        :key="index"
                        :class="{curr:currentChild==child.id}"
                        href="#"
                        :data-id="child.id"
                        @click.prevent="changeChild(child.id,$event)"
                        >
                        {{ child.name }}
                        </a>
                    </td>
                </tr>
                <tr>
                    <th>排&nbsp;序：</th>
                    <td>
                        <a
                        v-for="(sort,index) in sortList"
                        :key="index"
                        :class="{curr:currentSort==sort.key}"
                        href="#"
                        :data-key="sort.key"
                        @click.prevent="changeSort(sort.key,$event)"
                        >
                        {{ sort.title }}
                    </a>
                    </td>
                </tr>
        </table>
        <CategoryList :PageCourseList="PageCourseList"></CategoryList>
        <Pagination 
        :currPage="currPage" 
        :total="totalRows" 
        :pageSize="pageSize" 
        :step="step"
        @changeCurrPage="changeCurrPage"
        ></Pagination>
        </div>
    </div>
</template>
  
<script>
import CategoryList from "@/views/category/CategoryList.vue";
import Pagination from "@/views/category/Pagination.vue";

export default {
    name: 'Category',
    data:function(){
        return {
            currentMasterId:0,
            currentChild:0,
            currentSort:'default',
            childCateList:[],
            sortList:[
                {title:'默认',key:'default'},
                {title:'价格高',key:'price-desc'},
                {title:'价格低',key:'price-asc'},
                {title:'销量高',key:'buy-desc'}
            ],
            currPage:1,
            totalRows:21,
            pageSize:5,
            step:2,
            PageCourseList:[]
        }
    },
    methods:{
        // 点击切换子栏目事件
        changeChild(id,e){
            this.currentChild = id;
            if( id == 0 ){
                this.loadCourseData(this.currentMasterId,this.currentSort);
            }else{
                this.loadCourseData(this.currentChild,this.currentSort);
            }
            
        },
        // 点击排序事件
        changeSort(sort,e){
            this.currentSort = sort;
            if( this.currentChild == 0 ){
                this.loadCourseData(this.currentMasterId,this.currentSort);
            }else{
                this.loadCourseData(this.currentChild,this.currentSort);
            }
            
        },
        // 获取当前栏目下的子栏目
        loadChildList(parentId){
            let all = [{name:'全部',id:0}];
            this.$request.get(`/category-child?pid=${parentId}`)
            .then(response => {
                let list = [...all,...response.data];
                this.childCateList = list;
            }).catch(error=>{
                console.log(error);
                this.PageCourseList = all;
            })
        },
        // 加载数据
        loadCourseData(childId,sort,page=1,limit=4){
            
            this.$request.get(`/category-course?sort=${sort}&page=${page}&limit=${limit}&cid=${childId}`)
            .then(response => {
                this.PageCourseList = response.data;
            }).catch(error=>{
                console.log(error);
                this.PageCourseList = [];
            })
        },
        changeCurrPage(num){
            this.currPage = num;
        }
    },
    mounted:function(){
        this.currentMasterId = this.$route.params.id;
        this.loadChildList(this.currentMasterId);
        this.loadCourseData(this.currentMasterId,this.currentSort);
    },
    watch:{
        $route(to,form){
            this.currentMasterId = to.params.id;
            this.loadChildList(this.currentMasterId);
            this.currentChild = 0;
            this.currentSort = 'default';
            this.loadCourseData(this.currentMasterId,this.currentSort);
        }
    },
    components: {
        CategoryList,
        Pagination
    }
}
</script>
  
<style>
/*首页与列表页*/
.main-index .m-title{height:30px;line-height:30px;overflow:hidden;margin:20px 0;font-size:30px;position:relative;}
.main-index .m-title a{font-size:14px;color:#888;position:absolute;top:5px;right:12px;}
.main-index .m-title a:hover{color:#666;}
.main-index .m-list{overflow:hidden;}
.main-index .m-each{width:280px;background:#fff;border:1px solid #ddd;padding-bottom:12px;float:left;margin:0 18px 20px 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.main-index .m-each:nth-child(4n){margin-right:0;}
.main-index .m-each img{display:block;transition:all 0.5s ease 0s;}
.main-index .m-each img:hover{transform:scale(1.1);}
.main-index .m-e-img-a{width:280px;height:156px;overflow:hidden;display:block;margin-bottom:10px;}
.main-index .m-e-title{color:#555;font-size:14px;margin-left:10px;}
.main-index .m-e-title:hover{color:#50B0F4;}
.main-index .m-e-info{margin-left:10px;margin-top:8px;margin-right:10px;overflow:hidden;}
.main-index .m-e-info i{color:#c00;font-size:14px;font-style:normal;float:left;}
.main-index .m-e-info b{color:#999;float:right;font-weight:normal;}
/*列表页导航*/
.main-list{padding-top:20px;padding-bottom:30px;}
.main-list .pagelist{text-align:center;margin-top:5px;}
.main-list .m-nav{border-collapse:collapse;border:1px solid #ddd;width:100%;margin-bottom:20px;color:#666;font-family:Arial,simsun;}
.main-list .m-nav tr{border:1px dotted #ddd;}
.main-list .m-nav th{width:80px;text-align:right;height:42px;}
.main-list .m-nav td a{display:block;height:24px;line-height:24px;border-radius:3px;padding:0 5px;margin:0 5px;cursor:pointer;color:#666;transition:all 0.2s ease-out;float:left;}
.main-list .m-nav td a:hover{color:#fff;background:#50B0F4;}
.main-list .m-nav td a.curr{color:#fff;background:#50B0F4;}
</style>
  